<script setup>
import { reactive, ref } from "vue"

let username = ref("张三")
let code = ref("<h1 style='background-color: pink;'>欢迎来到知了课堂！</h1>")
let classname = ref('box')
let age = 18
let weather = 'rain'



const books = reactive([
    { 'name': '三国演义', 'author': '罗贯中' },
    { 'name': '水浒传', 'author': '施耐庵' },
    { 'name': '西游记', 'author': '吴承恩' },
    { 'name': '红楼梦', 'author': '曹雪芹' }
])

let person = reactive({
    username: "知了课堂",
    age: 100
})



let bookList = ref(["红楼梦", "水浒传", "三国演义", "西游记"])

let count = ref(0);

// 获取 ref 属性的值
let usernameInput = ref()

// vue 中响应式变量式双向的 如果想要通过表单元素 实时修改响应式变量 则可以通过 v-model 属性实现
let category = ref(0)
let school = ref("")

const onUpdateUsername = () => {
    username.value = '李四'
}

const onUpdateBooks = () => {
    books.sort((x, y) => {
        let a = Math.random()
        let b = Math.random()
        return a - b
    })}

const updateViews =() =>{
    // 1、添加元素
    //books.splice(1,0,{name:"金瓶梅",author:"兰陵笑笑生"})
    // 2、删除
    books.splice(0,1)
    // 3、替换
    books.splice(0,1,{name:"金瓶梅",author:"兰陵笑笑生"})
}

const updateBook =() =>{
    bookList.value=["鹿鼎记"]
}

const plusTen =function(value){
    count.value += value

}

const subTen = function(value,event){
     count.value -= value
     console.log(event)
     
}

const goto360 = function(event){
    //event.preventDefault();
    window.location = "https://www.google.cn/"
}

const getUsername = () =>{
    console.log(usernameInput.value.value)
    
}



</script>

<template>
    <p v-once>{{ username }}</p>
    <div>
        <button @click="onUpdateUsername">修改username</button>
    </div>
    <div v-html="code"></div>
    <div :class="classname">蓝色生死恋</div>
    <div>{{ age > 18 ? '您可以进网吧！' : '你不可以进入网吧' }}</div>

    <div v-if="weather == 'sun'">今天去公园！</div>
    <div v-else-if="weather == 'rain'">今天去看电影！</div>
    <div v-else>今天哪里也不去！</div>

    <div v-show="true">这是show的div</div>

    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(book, index) in books">
                <td>{{ index + 1 }}</td>
                <td>{{ book.name }}</td>
                <td>{{ book.author }}</td>
            </tr>
        </tbody>
    </table>

    <div>
        <p v-for="(value, key) in person">键：{{ key }}，值：{{ value }}</p>
    </div>

    <div v-for="book in books" :key="book.name">
        <label>{{ book.name }}</label>
        <input type="text" :placeholder="book.name">
    </div>
    <button @click="onUpdateBooks">更新图书</button>
    <button @click="updateViews">更新视图splice</button>

    <div>
        <span v-for="book in bookList">{{ book }}  </span>
    </div>
    <button @click="updateBook">替换图书</button>

    <div>
        <p>count: {{ count }}</p>
        <button v-on:click="count++">点我加一</button>
        <button @click="plusTen(10)">点我加十</button>
        <button @click="subTen(100,$event)">点我减一百</button>
    </div>

    <div>
        <a href="https://www.baidu.com/" @click.prevent="goto360($event)">点去百度</a>
    </div>
    
    <div>
        <input type="text" ref="usernameInput" placeholder="请输入用户名"></input>
        <button @click="getUsername">点我获取用户名</button>
    </div>
    
    <div>
        <input v-mode="school"/>
        <p>用户名为： {{school}}</p>
    </div>

    <div>
        <select v-model="category">
            <option value="1">Python</option>
            <option value="2">vue</option>
            <option value="3">hadoop</option>
        </select>
        <p>分类为： {{ category }}</p>
    </div>
  



</template>

<style scoped>
.box {
    background-color: aqua;
}
</style>